<template>
	<view class="noteLogin">
		<view class="title">
			验证码登录
		</view>
		<view class="area">国家/地区 中国+86</view>
		<view class="phone">
			<input type="text" placeholder="请输入手机号" v-model="phoneNum">
		</view>
		<view class="password">验证码登录</view>
		<view class="pasw">
			<input type="text" placeholder="请输入验证码" v-model="codeNum">
			<text @tap="getCode">{{code}}</text>
			<!-- <text>60s后重新获取</text> -->
		</view>
		<view class="noteCode" @tap="goPasswordLogin" >用密码登录 <van-icon name="arrow" /></view>
		<view class="loginBtn" @tap="goHome">登录</view>
		<view class="noRegiest">未注册手机验证后自动登录</view>
	</view>
</template>

<script>
	import utils from '../../components/utils/utils.js';
	export default {
		data() {
			return {
				code:'获取验证码',
				phoneNum:'',
				codeNum:''
			}
		},
		methods: {
			goPasswordLogin (){
				uni.navigateTo({
					url:'/pages/passwordLogin/passwordLogin'
				})
			},
			goHome (){
				uni.reLaunch({
				    url: '/pages/home/home'
				})
			},
			getCode (){
				if(this.phoneNum==''){
					uni.showToast({
						title:"请输入手机号",
						icon:'none'
					})
					return ;
				}
				if(this.code!='获取验证码') return;
				var num =60;
				var time=setInterval(() =>{
					num--;
					this.code=num+'s后重新获取';
					if(num==0){
						this.code='获取验证码'
						clearInterval(time);
					}	
				},1000)
			},
			loginBtn (){
				let opts = { url: '/api/login/do_login', method: 'post' };
				      let param = {
						  
					  };
				      utils.httpTokenRequest(opts, {}).then(
				        res => {
				          //console.log('换取签名tim userSig-------------', res);
				          that.initTIM(res.data.msg, res.data.data);
				        },
				        error => {
				          //console.log(error);
				        }
				      );
			}
		}
	}
</script>

<style lang="less" scoped>
.noteLogin{
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding-left: 55rpx;
	box-sizing: border-box;
	.title{
		font-size:46rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:#333;
		margin-top:125rpx;
	}
	.area{
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:#666666;
		margin-top:85rpx;
	}
	.phone{
		width: 635rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F2F2F2;
		line-height: 80rpx;
		padding-left:20rpx;
		input{
			margin-top: 40rpx;
			width: 100%;
			font-size: 32rpx;
			height: 100%;
			&:placeholder{
				font-size: 20rpx;
				color: #999;
			}
		}
	}
	.loginBtn{
		width:635rpx;
		background:#ED2C61;
		color:#fff;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		margin-top:80rpx;
	}
	.password{
		color:#333333;
		font-size: 32rpx;
		padding: 30rpx 0;
	}
	.pasw{
		width: 635rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F2F2F2;
		line-height: 80rpx;
		padding-left:20rpx;
		display: flex;
		justify-content: flex-start;
		input{
			width: 70%;
			font-size: 32rpx;
			height: 100%;
			margin-right: 20rpx;
			&:placeholder{
				font-size: 20rpx;
				color: #999;
			}
		}
		text{
			color:#ED2C61;
			font-size: 24rpx;
		}
	}
	.noteCode{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(102,102,102,1);
		margin-top:30rpx;
	}
	.otherLogin{
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		margin-top:150rpx;
		width: 100%;
		text-align: center;
	}
	.noRegiest{
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:#333;
		width: 100%;
		text-align: center;
		margin-top:330rpx;
	}
	
}
</style>
